<template>
    <div>
      <el-row class="title">
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            店铺信息简介
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <div class="merchant-info">
            <p>店铺名称：{{ merchant.merchantName }}</p>
            <p>店铺信息介绍：{{ merchant.Description }}</p>
            <p>营业许可证号：{{ merchant.businessLicenseNumber }}</p>
            <p>联系电话：{{ merchant.phoneNumber }}</p>
          </div>
        </el-col>
       
        <el-col :span="6">
          <div class="merchant-image">
            <img :src="merchant.merchantImage" alt="店铺图片" style="float: right;"/>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="store-status">
            店铺营业状态：
            <el-switch
              v-model="buttonValue"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="buttonChange"
              :active-value="0"
              :inactive-value="1"
            ></el-switch>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="merchant-address">
            店铺地址：{{ merchant.merchantAddress }}
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            店铺注册时间：{{ merchant.registrationDate }}
          </div>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  export default {
    name: 'Merchant',
    data() {
      return {
        merchant: {},
        buttonValue: ''
      }
    },
    methods: {
      buttonChange(val) {
        console.log('当前店铺状态：' + val)
        this.buttonValue = val
        this.$http({
          url: this.$http.adornUrl('/merchantMessage/updateStatus/' + this.buttonValue),
          method: 'put'
        })
      },
      getMerchantMessage() {
        this.$http({
          url: this.$http.adornUrl('/merchantMessage'),
          method: 'get'
        }).then(({ data }) => {
          this.merchant = data.merchant,
            this.buttonValue = data.merchant.merchantStatus,
            console.log('店铺营业状态：' + this.buttonValue)
          console.log(data)
        })
      }
    },
    mounted() {
      this.getMerchantMessage();
    }
  }
  </script>
  
  <style scoped>
    .el-row {
      margin-bottom: 20px;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
      padding: 10px;
    }
    .bg-purple-dark {
      background: #99a9bf;
      color: #fff;
    }
    .bg-purple {
      background: #d3dce6;
    }
    .merchant-info {
      padding: 20px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
    }
    .merchant-image img {
      width: 200px;
      height: 200px;
      border-radius: 4px;
      align-content: right;
    }
    .store-status {
      padding: 20px;
      background-color: #f3f3f3;
      border-radius: 4px;
    }
    .merchant-address {
      padding: 20px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
    }
    
    .title {
      text-align: center;
      font-size: 24px; /* 调整字体大小 */
      font-weight: bold; /* 加粗字体 */
      color: #fff; /* 字体颜色 */
    }
  </style>
  